<template>
  <div>
    <a href="javascript:;" style="color:#409EFF;" @click="dialogprogressVisibleIframe = true" :title='titleText'>
      <el-progress class="el-progress-bg-gray" :text-inside="true" :stroke-width="18" :percentage="paramsData.percentage"></el-progress>
    </a>
    <el-dialog
      title="查看明细"
      :fullscreen="false"
      :visible.sync="dialogprogressVisibleIframe"
      :width="paramsData.width"
      top="40px"
      >
      <div :style="'width:100%;height:'+paramsData.bodyHeight+'px;'">
        <iframe width='100%' height='100%' :src="actionUrl" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>
<script>
define(['vue'],function(vue){
  return vue.component('comp-progress-iframe-dialog',{
    template: template,
    props : {
      action :{required:true},
      row:{required:true},
      index:{required:true},
      params:{required:false},
      getParams:{required:false},
    },
    data:function(){
      //处理每行不同的title
      var titleTmp = '点击查看明细';
      if(this.params && this.params.titleKey){
        titleTmp = this.row[this.params.titleKey];
      }

      return {
        dialogprogressVisibleIframe:false,
        titleText:titleTmp,
        actionUrl:this.action,
        paramsData:{}
      }
    },
    mounted : function() {
      this.paramsData.percentage = this.row[this.params.percentage];
      this.paramsData.width = this.params.width || "90%";

      this.paramsData.bodyHeight = document.documentElement.clientHeight || document.body.clientHeight;
      this.paramsData.bodyHeight -= 150;

      //处理弹框的url
      for(var k in this.getParams){
        var p = this.getParams[k];
        this.actionUrl += "&"+p+"="+this.row[p];
      }
    }
  });
});

</script>
<style type="text/css">
  .el-dialog__body{padding: 10px 15px;}
</style>